<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>


<link rel="stylesheet" href="${ctx}/static/plugins/zTree/css/zTreeStyle/zTreeStyle.css" />
<%-- 
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/bootstrap/extra_easyui.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/panel.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/datagrid.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/pagination.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/tree.css" />
 --%>
 
<title>系统资源管理</title>

<div class="page-header">
	<h1>
		系统资源树列表 
	</h1>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-xs-12">
				<button class="btn btn-purple btn-xs height-30" onclick="oSearch();">
					<i class="ace-icon fa fa-search"></i>
					搜索
				</button>
				<button class="btn btn-pink btn-xs height-30" onclick="resetSearch();">
					<i class="ace-icon fa fa-share bigger-100"></i>
					重置
				</button>
				<button class="btn btn-success btn-xs height-30" onclick="oTable.ajax.reload();">
					<i class="ace-icon fa fa-search"></i>
					刷新
				</button>
			</div>
		</div>
		<div class="space-2"></div>
	
		<div class="row">
			<div class="col-xs-12">
				<div class="row">
					<div class="col-xs-6">
						<ul id="tree1" class="ztree"></ul>
					</div>
					<div class="col-xs-6">
						<ul id="tree2" class="ztree"></ul>
					</div>
				</div>
	
				<div class="row">
					<div class="col-xs-6">
						<input id="resourceSel" type="text" readonly value="" style="width:180px;" onclick="showMenu();" />
						<div id="menuContent" class="menuContent" style="display:none; position: absolute;"> 
							<ul id="tree3" class="ztree sel" style="margin-top:0; width:180px; height: 200px;"></ul>
						</div>
					</div>
					<div class="col-xs-6">
					</div>
				</div>
	
			</div>
		</div>
		
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<script type="text/javascript">
var zNodes =[
    		{id:1, pId:0, name:"[core] 基本功能 演示", open:true},
    		{id:101, pId:1, name:"最简单的树 --  标准 JSON 数据", file:"core/standardData"},
    		{id:102, pId:1, name:"最简单的树 --  简单 JSON 数据", file:"core/simpleData"},
    		{id:2, pId:0, name:"[excheck] 复/单选框功能 演示", open:false},
    		{id:201, pId:2, name:"Checkbox 勾选操作", file:"excheck/checkbox"},
    		{id:206, pId:2, name:"Checkbox nocheck 演示", file:"excheck/checkbox_nocheck"},
    		{id:207, pId:2, name:"Checkbox chkDisabled 演示", file:"excheck/checkbox_chkDisabled"},
    		{id:208, pId:2, name:"Checkbox halfCheck 演示", file:"excheck/checkbox_halfCheck"},
    		{id:202, pId:2, name:"Checkbox 勾选统计", file:"excheck/checkbox_count"},
    		{id:203, pId:2, name:"用 zTree 方法 勾选 Checkbox", file:"excheck/checkbox_fun"},
	];
var scripts = [null, 
               "${ctx}/static/plugins/zTree/js/jquery.ztree.core-3.5.js", 
               "${ctx}/static/plugins/zTree/js/jquery.ztree.excheck-3.5.js", 
               null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		var t1 = $("#tree1");
		$.get("${ctx}/admin/sys/resource/tree", function(result) {
			$.fn.zTree.init(t1, {}, result);
		},"JSON") ;
		
		
		var setting2 = {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable:true,
						idKey: "id",
						pIdKey: "pid",
						rootPId: ""
					}
				}
		};
		var t2 = $("#tree2");
		$.get("${ctx}/admin/sys/resource/allList", function(result) {
			$.fn.zTree.init(t2, setting2, result);
		},"JSON") ;
		
		
		var t3 = $("#tree3");
		$.get("${ctx}/admin/sys/resource/allList", function(result) {
			$.fn.zTree.init(t3, setting2, result);
		},"JSON") ;
		
	});
});

function showMenu() {
	var sel = $("#resourceSel") ;
	
	$("#menuContent").css({"top": sel.outerHeight()-1+"px"}).slideDown("fast");

	$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
	$("#menuContent").fadeOut("fast");
	$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
	if (!(event.target.id == "menuBtn" || event.target.id == "resourceSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
		hideMenu();
	}
}

</script>


